<!-- 设置页面 -->
<template>
	<view class="login">
		<view class="loginimg">
			<image class="img" src="../../static/images/logo2.png"></image>
			<view class="textbox">墨运</view>
		</view>
		<!-- 用户表单 -->
		<view class="userinfo">
			<view class="username">
				<input type="text" placeholder="用户名" v-model="username"/>
			</view>
			<view class="password">
				<input type="text" placeholder="密码" v-model="password" />
			</view>
			<view class="keyword">
				<view>
					<input type="text" placeholder="验证码" v-model="codekey"/>
				</view>
				<view class="keyimg" @click="getClickCodeKey">
					<!-- <view class="" v-if="isGetCodeKey===false">点击获取验证码图片</view> -->
					<image class="keyimg" :src="codeimg" mode="aspectFit" ></image>
				</view>
			</view>
		</view>
		<!-- 记住密码 -->
		<view class="passwordbox">
			<checkbox>记住密码</checkbox>
			<view >忘记密码</view>
		</view>
		<!-- 登录 -->
		<view class="loginbox">
			<view @click="login">登录</view>
		</view>
		<!-- <view>Token:{{member.token}}</view> -->
	</view>
</template>

<script setup >
import {ref} from "vue"	
import {apiCodeKey,key,apiLogin} from "/api/apis.js"
// 调用Pinia缓存token
import { useUserMemberStore} from "/stores/usermember.js"
const member= useUserMemberStore();
// 对token初始化
// member.token.value='111';
// 定义用户名密码验证码
// const isGetCodeKey=ref(false)
const username=ref("");
const password=ref("")
const codekey=ref("")
username.value="admin";
password.value="123456"

// 发起验证码图片请求
const codeimg=ref("");
async function getCodeKey(){
	let res;
	try{
		res=await apiCodeKey();
		codeimg.value=res.result
		
	}catch(error){
		uni.showToast({
			title:"网络请求失败，请检查连接",
			icon:"none"
		})
	}
	
}
getCodeKey();
// 当点击验证码再发送一回请求
const getClickCodeKey=()=>{
	getCodeKey();
}
// 登录发送请求
const login=async()=>{
	let res;
	try{
		res=await apiLogin(codekey.value,username.value,password.value);
		// 赋值token
		member.token=res.result.token;
		// 赋值成功跳转首页
		uni.showToast({
			title:"登录成功",
			icon:"none",
			duration:2000
		})
		// 设置登录状态
		member.loginstatus=true;
		// console.log("token赋值2：",member.token)
		uni.switchTab({
			url:'/pages/index/index'
		})
	}catch(error){
		console.log("进入登录发送请求catch块");
			//验证码错误清空验证码
			if(error.message=="验证码错误"){
				codekey.value=''
				// 并且重新发送验证码请求
				getCodeKey();
			}
		console.log("登录发送请求错误对象：", error);
		console.log("登录发送请求错误信息：", error && error.message);
	}
}


	
</script>

<style lang="scss">
@keyframes gradientFlow {
 0% { background-position: 0% 0%; }
   25% { background-position: 50% 0%; }
   50% { background-position: 25% 0%; }
   75% { background-position: 75% 0%; }
   100% { background-position: 100% 0%; }
}
@font-face {
  font-family: "阿里妈妈刀隶体 Regular";
  font-weight: 400;
  src: url("//at.alicdn.com/wf/webfont/733Eb6B5swG2/lHPYtpKG6t20.woff2") format("woff2"),
	   url("//at.alicdn.com/wf/webfont/733Eb6B5swG2/roQ4I7g8u96V.woff") format("woff");
  
  font-display: swap;
}
@font-face {
  font-family: "阿里妈妈刀隶体 Regular1";
  font-weight: 400;
 src: url("//at.alicdn.com/wf/webfont/733Eb6B5swG2/ibwxPjtEHJTA.woff2") format("woff2"),
	url("//at.alicdn.com/wf/webfont/733Eb6B5swG2/8txPPRXgVDt8.woff") format("woff");
  
  font-display: swap;
}
.login{
	background: linear-gradient(179deg, rgba(98, 29, 243, 0.17) 3.57%, rgba(255, 125, 125, 0.10) 12.6%, rgba(255, 140, 140, 0.11) 22.62%, rgba(255, 255, 255, 0.20) 98.13%), radial-gradient(24.15% 85.7% at 10.29% 4.18%, rgba(0, 40, 250, 0.11) 0%, rgba(171, 133, 0, 0.05) 31.62%, rgba(0, 255, 148, 0.06) 62.15%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(25.63% 91.04% at 96.26% 3.9%, rgba(143, 0, 255, 0.20) 0%, rgba(255, 193, 101, 0.09) 39.68%, rgba(192, 253, 253, 0.20) 80.6%, rgba(255, 255, 255, 0.20) 100%);
	 background-size: 250% 100%; /* 增大背景尺寸以允许平滑过渡 */
	 animation: gradientFlow 15s linear alternate-reverse infinite; /* 添加动画效果 */
	// margin-top:60rpx;
	padding:10rpx ;
	
	.loginimg{
		width: 284rpx;
		height: 326rpx;
		margin-left: 238rpx;
		margin-top: 138rpx;
		.img{
			width:100%;
			height: 242rpx;
		}
		.textbox{
			marign-top:36rpx;
			margin-left:100rpx;
			color: #000;
			font-family: Inter;
			font-size: 40rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
	}
	// 用户名样式
	.userinfo{
		padding-left: 106rpx;
		padding-right:106rpx ;
		// border: 1rpx solid #000;
		.username{
			display: flex;
			height: 128rpx;
			width: 542rpx;
			justify-content: center;
			align-items: center;
			border-radius: 34px;
			background: #EBE1FF;
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			input{
				text-align: center;
			}
		}
		.password{
			display: flex;
			margin-top: 16rpx;
			margin-bottom: 16rpx;
			height: 128rpx;
			width: 542rpx;
			justify-content: center;
			align-items: center;
			border-radius: 34px;
			background: #EBE1FF;
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			input{
				text-align: center;
			}
		}
		.keyword{
			display: flex;
			// height: 128rpx;
			height: 128rpx;
			width: 542rpx;
			justify-content: center;
			align-items: center;
			border-radius: 34px;
			background: #EBE1FF;
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			input{
				width: 260rpx;
				text-align: center;
				// border: 1rpx solid #000;
			}
			.keyimg{
				width: 200rpx;
				height:100rpx;
			}
		}
	}
	
	// 记住忘记密码样式
	.passwordbox{
		margin-top: 20rpx;
		margin-bottom: 26rpx;
		display:flex;
		checkbox{
			margin-left:114rpx;
			margin-right: 200rpx;
		}
	}
	
	// 登录样式
	.loginbox{
		margin-left: 172rpx;
		display: flex;
		width: 410rpx;
		height: 126rpx;
		justify-content: center;
		align-items: center;
		border-radius: 34px;
		background: #EBE1FF;
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
		
	}
}

</style>
